<script setup lang="ts" name="Main">
import {onMounted, onUnmounted, reactive, ref} from "vue";
import {ElMessage, ElMessageBox} from 'element-plus'
import router from "@/router";
import {post, get} from "@/assets/request.ts"

import "@/assets/iconfont/iconfont.js"
import "@/assets/iconfont/iconfont.css"

import useClipboard from 'vue-clipboard3'

import Hls  from "hls.js";
import Aplayer from "aplayer"
import "APlayer/dist/APlayer.min.css"  //引入音乐插件样式

import vue3VideoPlay from 'vue3-video-play' // 引入组件
import 'vue3-video-play/dist/style.css'

//定义变量，用于获取用户输入的搜索内容
let title = ref('');


//定义变量，用于保存列表数据
let tableData = ref([])

//用户的路径  / :根目录
let nowUserPath = ref('/');

//声明一个对象，英语保存  登录的用户信息
let user_session = reactive({userName: ''})
//获取session中的key为user的数据

//总容量
let totalSpace = ref(0)

//底部显示的内容
let bottomHtml = ref("")

//声明  控制重命名弹窗  false:默认不弹窗
let dialogNewFolder = ref(false);

//声明变量  获取新建文件夹的名称
let newFolderName = ref("");

//声明变量，存储文件类型
let fileTypeList = ref(new Set(['所有']));
//用户改变下拉框后的内容
let selectFileType = ref("所有")

let dialogFileRename=ref(false)

let fileRename=ref({oldName:'',newName:'',type:''})

let dialogShareVisible=ref(false)

//是否显示操作
let fileShowOpenionByIndex=ref(-1);

//定义要分享的文件名称
let sharefilename=ref('')

//定义有效期的变量
let radioExpire=ref('永久有效')

//定义分享对象
let shareLink=ref({href:'',msg:'',isBool:false})

const { toClipboard } = useClipboard()

//重命名弹窗是否出现
let dialogSelectTableFolder=ref(false)

//被选择的文件夹
let folderName=ref('')

// 定义  selectTableFolderList  用于存储所有文件夹
let selectTableFolderList=ref(new Set(['/']))

//用于存储被移动的文件名
let folderFileName=ref('')

//视频播放弹窗
let dialogVideoPlayer=ref(false)

const options = reactive({
    width: '770px', //播放器高度
    height: '450px', //播放器高度
    color: "#409eff", //主题色
    title: '', //视频名称
    src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
    muted: false, //静音
    webFullScreen: false,
    speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
    autoPlay: true, //自动播放
    loop: false, //循环播放
    mirror: false, //镜像画面
    ligthOff: false,  //关灯模式
    volume: 0.3, //默认音量大小
    control: true, //是否显示控制
    controlBtns:['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen'] //显示所有按钮,
  })

const clickplay = (fileName:string) => {
  if(fileExtension(fileName)=='#icon-icon-video'){
    Object.assign(options,{src:`http://192.168.56.1:8080/${fileName}`,title:fileName})
    dialogVideoPlayer.value=true
  }else{
    audio={
      name:fileName,
      artist:"艺术家",
      url:" http://192.168.56.1:8080/"+fileName,
      cover: "../assets/images/aplayer.png" //封面
    }
    aplayerMusic();
  }
}

const playerContainer=ref(null)

let aplayer=ref({});
let audio=[]

//音乐播放配置
const aplayerMusic = () => {
  const hls=new Hls()
  aplayer.value=new Aplayer({
    container:playerContainer.value,
    audio,
    html5:true,
    fixed:true,
    mini:true,
    theme:"#FADFA3",
    preload:true,
    loop:true,
    order:'list',
    muted:true,
    volume:0.7,
    listFolded:false
  })

  //监听  音乐加载完成事件，在调用hls.js  加载HLS流
  aplayer.value.audio.addEventListener('conplay',()=>{
    hls.loadSource(audio.url)
    hls.attachMedia(aplayer.audio)

  })
}

//
const playerMusic = () => {
   let arr= tableData.value.filter(item=>{
     let fileName=item.name.split(".").pop().toLowerCase();
     return fileName=='mp3'
  })
  arr.forEach((item,index)=>{
    audio.push({
      name:item.name,
      artist:"艺术家",
      url:" http://192.168.56.1:8080/"+item.name,
      cover: "../assets/images/aplayer.png" //封面
    })
  })
  //播放音乐
  aplayerMusic()
}

onUnmounted(()=>{
  if(aplayer){
    aplayer.value.destroy();
  }
})

//获取文件的后缀名  用于判断文件的类型
const fileExtension = (value: string, type: string) => {

  if (type == "Directory") {
    return "#icon-wenjianjia_guan"
  } else {
    //value 文件名称   xxx.txt
    let extension = value.split(".").pop().toLowerCase();

    if (extension == "mp3") {
      return '#icon-yinle1';
    } else if (extension == "mp4") {
      return '#icon-icon-video';
    } else if (extension == "ppt" || extension == "pptx") {
      return "#icon-ppt1";
    } else if (extension == "xls" || extension == "xlsx") {
      return '#icon-excel2';
    } else if (extension == "doc" || extension == "docx") {
      return '#icon-WORD';
    } else if (extension == "jpg" || extension == "png") {
      return '#icon-tupian1';
    } else if (extension == "txt") {
      return "#icon-icon"
    } else {
      return '#icon-file-unknown';
    }
  }

}


//定义onMounted生命周期函数
onMounted(() => {
  // 因为使用过了 ref 定义变量，所以需要.value才能使用   template中不需要
  nowUserPath.value = '/';
  //获取session中的key为user的数据
  let userJsonstr = sessionStorage.getItem("user")
  //将字符串转换为对象
//console.log(userJsonstr,JSON.parse(userJsonstr));
//通过Object.assion  将转换后的对象替换到user_session对象中
  Object.assign(user_session, JSON.parse(userJsonstr))

  refreshUserFileList();
})

//通过该方法查询用户文件列表
const userFileList = () => {
  post('/api/userfilelist', {path: nowUserPath.value})
      .then(response => {

        tableData.value = response;
        //遍历所有的内容
        response.forEach((item) => {
          //获取所有文件的后缀
          if(item.name.indexOf(".") !=-1){
            //在文件名中存在后缀
            let fileName=item.name.split(".").pop().toLowerCase();
            // fileTypeList.value.push({name:fileName,value:fileName});
            //向set中插入集合
            fileTypeList.value.add(fileName)
          }

          if(item.type=='dir'){
            selectTableFolderList.value.add(item.name)
          }
          folderName.value=selectTableFolderList.value[0]
        })
      })
}

//退出登录
const exit = () => {
  ElMessageBox.confirm('确定退出?')
      .then(() => {
        //点击确定后
        //清除session中的内容
        //sessionStorage.removeItem('user')
        //清除session中的所有内容
        sessionStorage.clear()
        //清除session后跳转到登录页面
        router.push({path: '/login'})
      })

}

//刷新页面
const refreshUserFileList = () => {
  get('/api/getspacesize')
      .then(response => {
        let jsonstorageinfo = JSON.parse(response.msg);


        totalSpace.value = (100 - (parseFloat((parseFloat(jsonstorageinfo.totalSpace) - parseFloat(jsonstorageinfo.freeSpace)).toFixed(2) / parseFloat(jsonstorageinfo.totalSpace).toFixed(2)) * 100)).toFixed(2);

        bottomHtml.value = parseFloat(jsonstorageinfo.freeSpace).toFixed(2) + "GB/" +
            (parseFloat(jsonstorageinfo.totalSpace) - parseFloat(jsonstorageinfo.freeSpace)).toFixed(2).toString() + "GB/" + parseFloat(jsonstorageinfo.totalSpace).toFixed(2) + "GB/(剩余/已用/总容量)";
        //当页面加载完成后  调用userFileList查询用户列表
        userFileList()
      })
}

//定义新建文件夹方法
const newFolder = () => {
  post('/api/dircreate', {dirName: newFolderName.value, path: nowUserPath.value})
      .then(res => {
        //提示创建文件夹成功
        ElMessage({
          message: res.msg,
          type: "success"
        })
        //关闭弹窗
        dialogNewFolder.value = false;
        newFolderName.value=''
        //刷新列表
        refreshUserFileList();
      })
}

//在下拉框改变时执行  用于过滤列表中的内容
const filterFileType=()=>{
  tableData.value=[];
  post('/api/userfilelist', {path:nowUserPath.value})
      .then(res=>{
        // 对数据进行过滤  将过滤后的数据存入arr
        let arr = res.filter(item=>{
          let fileName=item.name.split(".").pop().toLowerCase();
          if(selectFileType.value == "所有"){
            // 返回每一条数据
            return item;
          }else {
            return fileName == selectFileType.value;
          }
        })
        //过滤后的数据在页面中显示
        tableData.value = arr;
      })
}

//搜索功能的实现
const searchByKey=()=>{
  if(title.value == ""){
    ElMessage({
      message: '搜索关键字为空',
      type: 'warning',
    })
  }else{
    post('/api/search', {key:title.value,nowUserPath:nowUserPath.value})
    .then((res) => {
      //请求成功
      console.log(res)
      if(res.length == 0){
        ElMessage.success("没有查询到数据")
      }else{
        //将搜索到的内容  填充到table
        tableData.value = res;
      }
    })
  }
}

//将重命名弹窗 打开 并  准备修改的数据
const openDialogFileRename = (oldFile:string) => {
  // 打开  重命名弹窗
  dialogFileRename.value= true;
  //保存旧文件名  用于  修改请求
  fileRename.value.oldName=oldFile.name
  //保存旧的文件名  到新文件名中  用于  方便用户修改
  fileRename.value.newName=oldFile.name;
  fileRename.value.type=oldFile.type;
}

//定义  用于 修改文件  或文件夹的名称
const updateFileRename = ()=>{
  //是否是文件夹
  if(fileRename.type == 'dir'){
    //文件夹
    post('/api/filerename',{
      oldName:'@dir@',
      newName:fileRename.value.newName,
      path:nowUserPath.value
    }).then(res=>{
      console.log("请求成功（文件夹）：",res)
    })
  }else{
    post('/api/filerename',{
      oldName:fileRename.value.oldName,
      newName:fileRename.value.newName,
      path:nowUserPath.value
    }).then(res=>{
      console.log("请求成功（文件）：",res)
    })
  }
  //关闭重命名弹窗
  dialogFileRename.value = false;
  //刷新容量与列表
  refreshUserFileList();
}

// 删除文件
const deletefile = (filename:string) => {
  ElMessageBox.confirm(
      '确定删除该文件吗?',
      'Warning',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        post('/api/filedelete', {fileName:filename,path:nowUserPath.value})
            .then(res=>{
              ElMessage({
                message: '删除成功',
                type: 'success',
              })
              refreshUserFileList();
            })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消操作',
        })
      })
}

//双击目录时
const openSubdirectory=(row:any)=>{
  //判断  双击的行对象 对象是文件夹
  if(row.type="dir"){
    nowUserPath.value=row.name+'/';
    userFileList()
  }
}

//去指定的目录
const gothisdir = () => {
  nowUserPath.value='/';
  userFileList();
}

//分享功能的实现
const generateShareLink=()=>{
  post("/api/generateShareLink",({fileName:sharefilename.value,path:nowUserPath.value,expireDay:radioExpire.value}))
      .then(res=>{
        console.log(res)
        dialogShareVisible.value=false
        let tgLink="http://localhost:8083/sharefile?link="+res.msg

        //拆分字符串  0  链接  1：秘钥
        let tgReLink=tgLink.split("##");

        shareLink.value.href=tgReLink[0]
        shareLink.value.msg=tgReLink[1];
        shareLink.value.isBool=true;
      })
}

//打开分享窗口的方法
const openshare = (fileName:string) => {
  radioExpire.value='永久有效'
  sharefilename.value=fileName
  dialogShareVisible.value=true
}

//复制方法
const copy =async (sharecode:string) => {
    await toClipboard(sharecode)
    ElMessage({
      message: '复制成功',
      type: 'success',
    })
  shareLink.value.isBool=false
};

//用于下载文件
const downloadFile = (file:string) => {
  window.open('http://172.30.80.1:8080/'+file)
}

const openDirOrFile=(type:string,file:string)=>{
  if(type=='dir'){
    console.log(123)
  }else {
    downloadFile(file)
  }
}

// 移动的方法
const moveFile = () => {
  post('/api/filemove',({fileName:folderFileName.value,oldPath:nowUserPath.value,newPath:folderName.value+'/'})).then(res=>{
    dialogSelectTableFolder.value=false
    ElMessage({
      message:'移动成功',
      type:'success'
    })
    nowUserPath.value=folderName.value+'/'
    refreshUserFileList()
  })

}

//打开移动的对话框  将移动文件的弹窗打开
const openMoveFile=(file)=>{
  folderFileName.value=file.name
  dialogSelectTableFolder.value=true
}



</script>

<template>


  <div id="box">


    <el-row justify="center">
      <el-col :span="2" :offset="20" style="color: #342cff">
        你好，{{ user_session.userName }}
      </el-col>
      <el-col :span="2">
        <el-button type="danger" size="small" @click="exit">
          退出
        </el-button>
      </el-col>
    </el-row>
    <el-row justify="center">
      <el-col :span="2">
        <el-upload
            class="upload-demo top_button"
            action="/api/upload"
            name="file"
            :on-success="refreshUserFileList"
            :data="{path:nowUserPath}"
            :show-file-list="false">
          <el-button type="primary" size="small">
            <span style="font-size: 16px;margin-right: 5px">文件上传</span>
            <span class="icon-wenjianshangchuan iconfont" style="font-size: 18px"></span>

          </el-button>

        </el-upload>
      </el-col>
      <el-col :span="7">
        <el-button type="success" class="top_button" @click="dialogNewFolder=true" size="small">
          <span style="font-size: 16px;margin-right: 5px">新建文件夹</span>
          <span class="icon-xinjianwenjianjia iconfont" style="font-size: 18px"></span>
        </el-button>
        <el-button type="warning" class="top_button" @click="refreshUserFileList" size="small">
          <span style="font-size: 16px;margin-right: 5px">刷新</span>
          <span class="icon-shuaxin iconfont" style="font-size: 18px"></span>
        </el-button>
        <el-button @click="playerMusic"
            type="danger" class="top_button" size="small">
          <span style="font-size: 16px;margin-right: 5px">一键播放音乐</span>
          <span class="icon-bofang iconfont" style="font-size: 18px"></span>
        </el-button>
      </el-col>
      <el-col :span="10" style="padding-top: 10px;" align="right">
        <el-input placeholder="搜索当前目录" style="width: 400px" v-model="title">
          <template #prepend>
<!--            分类搜索-->
            <el-select @change="filterFileType" placeholder="分类搜索" style="width: 115px;" v-model="selectFileType" >
<!--              遍历展示所有的分类-->
              <el-option v-for="(filetype,index) in fileTypeList" :key="index" :label="filetype" :value="filetype">{{filetype}}</el-option>
            </el-select>
          </template>
          <template #append  >
            <div @click="searchByKey">
            <i class="icon-sousuo iconfont"></i>
            <el-button>搜索</el-button>
            </div>
          </template>
        </el-input>
      </el-col>
    </el-row>


  </div>
  <!--     目录导航-->
  <el-row justify="center" style="margin-top: 10px;margin-bottom: 10px">
    <el-col :span="20">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item  @click="gothisdir">根目录</el-breadcrumb-item>
        <el-breadcrumb-item v-show="nowUserPath!='/'" @click="gothisdir">{{ nowUserPath }}</el-breadcrumb-item>
        
      </el-breadcrumb>
    </el-col>
  </el-row>

  <!--  列表-->
  <el-row justify="center" >
    <el-col :span="19">
      <el-table :data="tableData" style="width: 100%" @row-dblclick="openSubdirectory" :lazy="true" >
        <el-table-column prop="name" label="文件名称" width="300" >
          <template #default="scope">
            <div class="parent" @click="openDirOrFile(scope.row.type,scope.row.name)">
              <svg class="icon" aria-hidden="true" >
                <use :xlink:href="fileExtension(scope.row.name,scope.row.size)" style="font-size: 20px;"></use>
              </svg>
              <el-popover
                  :content="scope.row.name"
                  placement="right-start"
              >
                <template #reference>
                  <span class="file_name">{{ scope.row.name }}</span>
                </template>
              </el-popover>
            </div>
          </template>
        </el-table-column>

<!--        操作-->
        <el-table-column width="200px" class="operation" >
          <template #default="scope">
            <div @mouseenter="fileShowOpenionByIndex=scope.$index" @mouseleave="fileShowOpenionByIndex=-1" style="margin: 0;padding: 0;width: 190px;height: 50px">
            <div  style="margin: 0;padding: 0;width: 190px;height: 50px;line-height: 50px" v-show="scope.$index==fileShowOpenionByIndex" >

            <el-tooltip
                class="box-item"
                effect="light"
                content="分享"
                placement="bottom-start"
            >
              <span class="icon-fenxiang iconfont" style="font-size: 18px;color: #0077aa" @click="openshare(scope.row.name)"></span>
            </el-tooltip>
            <el-tooltip
                class="box-item"
                effect="light"
                content="移动"
                placement="bottom-start"
            >
              <span class="icon-yidong iconfont" style="font-size: 18px;margin-left: 10px;color: #0077aa" @click="openMoveFile(scope.row)"></span>
            </el-tooltip>

            <el-tooltip
                class="box-item"
                effect="light"
                content="下载"
                placement="bottom-start"
            >
              <span class="icon-24px iconfont" style="font-size: 18px;margin-left: 10px;color: #0077aa" @click="downloadFile(scope.row.name)"></span>
            </el-tooltip>

            <el-tooltip
                class="box-item"
                effect="light"
                content="重命名"
                placement="bottom-start"
            >
              <span class="icon-24gl-rename iconfont" style="font-size: 18px;margin-left: 10px;color: #0077aa" @click="openDialogFileRename(scope.row)"></span>
            </el-tooltip>


            <el-tooltip
                class="box-item"
                effect="light"
                content="移除"
                placement="bottom-start"
            >
              <span class="icon-shanchu iconfont" style="font-size: 18px;margin-left: 10px;color: #0077aa"  @click="deletefile(scope.row.name)"></span>
            </el-tooltip>
              <el-tooltip
                  class="box-item"
                  effect="light"
                  content="播放"
                  placement="bottom-start"
                  v-if="fileExtension(scope.row.name,scope.row.size) == '#icon-yinle1'  || fileExtension(scope.row.name,scope.row.size) == '#icon-icon-video'  "
              >
                <span class="icon-bofang1 iconfont" style="font-size: 18px;margin-left: 10px;color: #0077aa" @click="clickplay(scope.row.name)"></span>
              </el-tooltip>
            </div>
            </div>
          </template>


        </el-table-column>


        <el-table-column prop="size" label="大小" width="100"/>
        <el-table-column prop="type" label="类型" width="80">
          <template #default="scope">
            <span v-if="fileExtension(scope.row.name) == '#icon-yinle1'">音乐</span>
            <span v-else-if="fileExtension(scope.row.name) == '#icon-icon-video'">视频</span>
            <span v-else-if="fileExtension(scope.row.name) == '#icon-ppt1'">PPT</span>
            <span v-else-if="fileExtension(scope.row.name) == '#icon-excel2'">Excel</span>
            <span v-else-if="fileExtension(scope.row.name) == '#icon-WORD'">Word</span>
            <span v-else-if="fileExtension(scope.row.name) == '#icon-tupian1'">图片</span>
            <span v-else-if="fileExtension(scope.row.name,scope.row.size) == '#icon-wenjianjia_guan'">文件夹</span>
            <span v-else-if="fileExtension(scope.row.name) == '#icon-icon'">文本文件</span>
            <span v-else>未知文件</span>

          </template>
        </el-table-column>

        <el-table-column prop="time" label="创建时间" width="180"/>

      </el-table>
    </el-col>
  </el-row>

  <!--  底部容量显示-->
  <el-row justify="center" >
    <el-col :span="19">
      <el-progress
          :text-inside="true"
          :stroke-width="20"
          :percentage="totalSpace"
          status="exception"
      />
      <p
          style="border-radius: 20px;padding-left: 30px;
        font-weight: bold;font-family: 'Microsoft YaHei';text-align:center;margin-top: 10px">
        {{ bottomHtml }}
      </p>
    </el-col>
  </el-row>

<!--  新建文件夹-->
  <el-dialog v-model="dialogNewFolder" width="500" title="新建文件夹">
    <el-input type="text" v-model="newFolderName"/>
    <template #footer>
      <el-button type="danger" @click="dialogNewFolder = false">取消</el-button>
      <el-button type="primary" @click="newFolder">确定</el-button>
    </template>
  </el-dialog>

<!--  重命名弹窗-->
  <el-dialog v-model="dialogFileRename" title="重命名" width="500">
    <el-input placeholder="请输入新的名称" v-model="fileRename.newName"/>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFileRename = false" type="warning">取消</el-button>
        <el-button @click="updateFileRename" type="primary">确定</el-button>
      </div>
    </template>
  </el-dialog>


  <!--分享弹窗-->
  <el-dialog v-model="dialogShareVisible" title="分享文件" width="500">
    <el-row>
      <el-col :span="20">
        要分享的文件：{{sharefilename}}
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        请选择要分享的有效期:
      </el-col>
      <el-col :span="16">
        <el-radio-group v-model="radioExpire">
          <el-radio value="永久有效">永久有效</el-radio>
          <el-radio value="7">7天</el-radio>
          <el-radio value="1">1天</el-radio>
        </el-radio-group>
      </el-col>
    </el-row>
    <el-row justify="center">
      <el-col :span="7">
        <el-button @click="dialogShareVisible=false" type="warning" size="small">取消</el-button>
        <el-button @click="generateShareLink" type="primary" size="small">确定</el-button>
      </el-col>
    </el-row>
  </el-dialog>

<!--  复制分享码-->
  <el-dialog v-model="shareLink.isBool" title="分享码" width="400">
    <el-row :span="6">
      <el-col>
          <span>分享码：</span>
        <el-input style="width: 300px" readonly v-model="shareLink.href">
          <template #append  >
            <el-tooltip
                class="box-item"
                content="点击复制"
                effect="light"
                placement="right"
            >
              <span class="icon-fuzhi iconfont" style="font-size: 18px;" @click="copy(shareLink.href)"></span>
            </el-tooltip>
          </template>
        </el-input>
      </el-col>
    </el-row>
    <el-row justify="center" style="margin-top: 10px">
      <el-col :span="8">提取码：{{shareLink.msg}}</el-col>
      <el-col :span="13" style="text-align: right;" ><el-button type="success" size="small" @click="copy(`下载地址：${shareLink.href},提取码：${shareLink.msg}`)">一键复制</el-button></el-col>
    </el-row>

  </el-dialog>

<!--  移动窗口弹窗-->
  <el-dialog v-model="dialogSelectTableFolder" title="移动">
    <el-select v-model="folderName" placeholder="Select" size="large" style="width: 340px">
      <el-option v-for="(folder,index) in selectTableFolderList" :key="index" :label="folder" :value="folder" />
    </el-select>
    <template #footer>
      <el-button @click="dialogSelectTableFolder=false" type="warning">取消</el-button>
      <el-button @click="moveFile" type="success">确定</el-button>
    </template>
  </el-dialog>


<!--  音乐/视频的播放-->
  <div ref="playerContainer"></div>
  <el-dialog v-model="dialogVideoPlayer" :title="options.title" width="800">
    <vue3VideoPlay v-bind="options" poster="../assets/login.jpg"></vue3VideoPlay>
  </el-dialog>
</template>



<style scoped lang="css">
#box {
  background-image: url("../assets/images/header_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
}

.top_button {
  margin-left: 20px;
  margin-top: 10px;
}

.icon-sousuo {
  margin-right: 8px;
}

.file_name:link {
  text-decoration: none;
  color: black;

}

.file_name:visited {
  color: #81807f;
}

.parent {
  display: flex;
  /* 水平居中 */
  justify-content: left;
  /* 垂直居中 */
  align-items: center;
  height: 50px;
}

.file_name {
  margin-left: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 最多显示两行 */
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  width: 200px; /* 可以根据实际情况调整宽度 */
  font-size: 15px;
}
.icon {
  width: 3.5em;
  height: 5em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.operation{
  display: none;
  color: #0077aa;
}
.operation:hover{
  display: block;
}
</style>